<html>
  <head>
    <title>SIMILE Widgets | Timeline | Examples | Compact Painter</title>
    <link rel='stylesheet' href='../styles.css' type='text/css' />

    <!-- ############################################################################ -->
    <!-- To use this file on your own system, replace ../../api/timeline-api.js with  -->
    <!--     http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js          -->
    <!-- (where 2.3.1 is the current release number.)                                 -->
    <script src="../../api/timeline-api.js?bundle=true" type="text/javascript"></script>

    <script>
        var tl;
        
        function onLoad() {
            var eventSource = new Timeline.DefaultEventSource(0);
            
            var theme = Timeline.ClassicTheme.create();
            theme.event.instant.icon = "no-image-40.png";
            theme.event.instant.iconWidth = 40;  // These are for the default stand-alone icon
            theme.event.instant.iconHeight = 40;
            
            var d = Timeline.DateTime.parseIso8601DateTime("2001-06-10");
            
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "93%", 
                    intervalUnit:   Timeline.DateTime.WEEK, 
                    intervalPixels: 150,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    eventPainter:   Timeline.CompactEventPainter,
                    eventPainterParams: {
                        iconLabelGap:     5,
                        labelRightMargin: 20,
                        
                        iconWidth:        80, // These are for per-event custom icons
                        iconHeight:       80,
                        
                        stackConcurrentPreciseInstantEvents: {
                            limit: 5,
                            moreMessageTemplate:    "%0 More Events",
                            icon:                   "no-image-80.png", // default icon in stacks
                            iconWidth:              80,
                            iconHeight:             80
                        }
                    }
                }),
                Timeline.createBandInfo({
                    width:          "7%", 
                    intervalUnit:   Timeline.DateTime.MONTH, 
                    intervalPixels: 100,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'overview'  // original, overview, detailed
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadJSON("data.json?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
        }
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
    </script>
    <style>
        div.timeline-event-icon {
            border: 1px solid #aaa;
            padding: 1px;
            background: white;
        }
        div.timeline-event-icon-default {
            border: none;
            padding: 0px;
        }
    </style>
  </head>
  <body onload="onLoad();" onresize="onResize();">
    <ul id="path">
      <li><a href="/" title="Home">SIMILE Widgets</a></li>
      <li><a href="../../" title="Timeline">Timeline</a></li>
      <li><a href="../" title="Examples">Examples</a></li>
      <li><span>Compact Painter</span></li>
    </ul>
  
    <div id="header">
      <h1>Compact Painter Example</h1>
    </div>
  
    <div id="content">
      <p>Timeline version <span id='tl_ver'></span>.</p>
      <script>Timeline.writeVersion('tl_ver');</script>
    
      <div id="tl" class="timeline-default" style="height: 700px;"></div>
    </div>
    
    <div id="footer">
      Copyright &copy; <a href="http://web.mit.edu/">Massachusetts Institute of Technology</a> and Contributors 2006-2009 ~ Some rights reserved
    </div>
  </body>
</html>